import React, { useEffect, useState, useRef } from 'react';
import { SearchIcon, MenuIcon, XIcon } from 'lucide-react';
import { Link } from 'react-router-dom';
export function Navigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const categories = [{
    name: 'Kitchen Excellence',
    path: '/kitchen'
  }, {
    name: 'Laundry Advanced',
    path: '/laundry'
  }, {
    name: 'Climate Control',
    path: '/climate'
  }, {
    name: 'Home Integrity',
    path: '/security'
  }, {
    name: 'Buying Guides',
    path: '/guides'
  }, {
    name: 'Solutions',
    path: '/solutions'
  }];
  useEffect(() => {
    if (isSearchOpen && searchInputRef.current) {
      searchInputRef.current.focus();
    }
  }, [isSearchOpen]);
  const handleSearchToggle = () => {
    setIsSearchOpen(!isSearchOpen);
  };
  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle search submission here
    console.log('Search submitted:', searchInputRef.current?.value);
    setIsSearchOpen(false);
  };
  return <header className="sticky top-0 z-50 bg-white shadow-sm">
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center">
          <Link to="/" className="text-2xl font-bold text-[#343a40] mr-8">
            AppliancePicks
          </Link>
          <nav className="hidden md:block">
            <ul className="flex space-x-6">
              {categories.map(category => <li key={category.path}>
                  <Link to={category.path} className="text-[#343a40] hover:text-[#d4a373] transition-colors">
                    {category.name}
                  </Link>
                </li>)}
            </ul>
          </nav>
        </div>
        <div className="flex items-center space-x-4">
          <div className="relative">
            <button className="p-1 text-[#343a40] hover:text-[#d4a373]" onClick={handleSearchToggle} aria-label="Toggle search">
              <SearchIcon size={20} />
            </button>
            {/* Expandable search box */}
            <div className={`absolute right-0 top-full mt-2 transition-all duration-300 ease-in-out ${isSearchOpen ? 'opacity-100 visible translate-y-0' : 'opacity-0 invisible -translate-y-2'}`}>
              <form onSubmit={handleSearchSubmit} className="flex bg-white shadow-lg rounded-md overflow-hidden">
                <input ref={searchInputRef} type="text" placeholder="Search for appliances..." className="px-4 py-2 w-64 focus:outline-none" />
                <button type="submit" className="bg-[#d4a373] px-4 text-white hover:bg-[#c99b6e] transition-colors">
                  <SearchIcon size={18} />
                </button>
              </form>
            </div>
          </div>
          <button className="md:hidden p-1 text-[#343a40]" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
          </button>
        </div>
      </div>
      {/* Mobile menu */}
      {isMenuOpen && <div className="md:hidden bg-white border-t border-gray-100 py-4">
          <div className="container mx-auto px-4">
            <ul className="space-y-3">
              {categories.map(category => <li key={category.path}>
                  <Link to={category.path} className="block text-[#343a40] hover:text-[#d4a373] py-2" onClick={() => setIsMenuOpen(false)}>
                    {category.name}
                  </Link>
                </li>)}
            </ul>
          </div>
        </div>}
    </header>;
}